<template>
  <div class="home">
    <x-header></x-header>
    <x-sidebar></x-sidebar>
    <div class="content-box" :class="{'content-collapse':!this.$store.state.collapse}"> 
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>
 
<script>
import XHeader from './Header.vue'; 
import XSidebar from './Sidebar.vue'; 
 
export default {
  components: {
    XHeader,
    XSidebar 
  },
  methods: {
    // 模拟获取信息(坐标、名称等)
    getInfo() {
      // 模拟数据 
      const mockData = {
        data1: [{
          name: "当前用户",
          lon: 118.796,
          lat: 36.855,
          accessToken: "mock_access_token_123456"
        }],
        data: [
          {name: "设备1", lon: 118.8, lat: 36.86},
          {name: "设备2", lon: 118.79, lat: 36.845},
          {name: "设备3", lon: 118.785, lat: 36.85}
        ]
      };
      
      this.$store.commit('getUserInfo',  mockData.data1[0]); 
      this.$store.commit('getOthersInfo',  mockData.data); 
      this.$store.commit('mapReady'); 
    },
    
    // 模拟获取用户的所有硬件id 
    getId() {
      // 模拟数据 
      const mockData = [
        {id: "device_001", name: "硬件1"},
        {id: "device_002", name: "硬件2"}
      ];
      
      this.$store.commit('getUserId',  mockData);
    },
    
    // 模拟获取用户的key和secret 
    getKey() {
      // 模拟数据 
      const mockData = {
        data: [{
          key: "mock_app_key_123",
          secret: "mock_app_secret_456"
        }]
      };
      
      this.getAccessToken(mockData.data[0].key,  mockData.data[0].secret); 
    },
    
    // 模拟获得监控accessToken 
    getAccessToken(key, secret) {
      // 模拟数据 
      const mockResponse = {
        code: "200",
        data: {
          accessToken: "mock_camera_token_789",
          expireTime: Date.now()  + 3600000 
        }
      };
      
      this.$store.commit('getAccessToken',  mockResponse.data.accessToken); 
      this.getCameraList(mockResponse.data.accessToken); 
    },
    
    // 模拟获得摄像头列表 
    getCameraList(token) {
      // 模拟数据 
      const mockResponse = {
        code: "200",
        data: [
          {deviceSerial: "cam_001", channelNo: 1, name: "摄像头1"},
          {deviceSerial: "cam_002", channelNo: 1, name: "摄像头2"}
        ]
      };
      
      this.$store.commit('getCameraList',  mockResponse.data); 
    }
  },
  created() {
    this.getInfo(); 
    this.getId(); 
    this.getKey(); 
  }
}
</script>
 
<style>
.content-box {
  position: absolute;
  left: 250px;
  right: 0;
  top: 70px;
  bottom: 0;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
  background: #f0f0f0;
  padding: 10px;
  overflow-y: auto;
}
.content-collapse {
  left: 65px;
}
.crumbs {
  margin: 10px 0;
}
.container {
  padding: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>